<?php
require $this->__RAD__ . 'include/head.php';
?>
<body>

<?php
require $this->__RAD__ . 'include/header.php';
?>
<div class="join brand" style="background:url(<?= $this->__STATIC__ ?>/images/bg03.jpg) no-repeat center center /cover;">
    <div class="join-con01" style="padding-bottom:60px;">
        <div class="wrapper">
            <div class="tit">
                阿拉丁版图
            </div>
            <h2>您是菁英，您是人才，欢迎来阿拉丁共同创建未来，携手阿拉丁共同成长！</h2>
            <p class="p">
                实力让我们引领行业：2009年，第一家“阿拉丁麻辣烫” 直营店正式开业，并凭借独一无二的口味风靡市场，<br>
                成功吸引众多慕名而来的加盟者与闻香而至的饕客。
            </p>
        </div>
    </div>
    <div class="map">
        <div class="yy"></div>
        <div class="map-select">

            <div class="map-search clearfix">
                <a href="javascript:;" class="fh"><img src="<?= $this->__STATIC__ ?>/images/fh.png"></a>
                <a href="javascript:;" class="close"></a>
                <input type="hidden" class="map-search-input" value="1">
                <form>
                    <input class="map-search-title" type="text" placeholder="请输入区域">
                    <input class="map-search-button" type="button" value="提交查询">
                </form>
            </div>
            <div class="map-con">
                <h3><span>上海市</span>门店地址</h3>
                <div class="scroll-div">
                    <ul class="map-search-ul">
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="detail">
            美味哪里找<br>
            <img src="<?= $this->__STATIC__ ?>/images/dj.png">
        </div>

        <div id="china-map" style="height:800px;"></div>
        <div class="ditu">
            <?php
            if ($this->map) :
                foreach ($this->map as $val) :
                    ?>
                    <img src="<?= $this->__CDN__ ?>pics/l/<?= $val->map_img ?>" data="<?= $val->map_title ?>" data-value="<?= $val->map_id ?>">
                    <?php
                endforeach;
            endif;
            ?>
        </div>
    </div>
</div>

<?php
require $this->__RAD__ . 'include/footer.php';
?>
<?php
require $this->__RAD__ . 'include/right.php';
?>

</body>
</html>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/common.js"></script>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/echarts.js"></script>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/china.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));

    var geoCoordMap = {
        "山东":[120.33,36.07],
        "西藏":[91.11,29.97],
        "上海":[121.48,31.22],
        "福建":[119.3,26.08],
        "广西":[108.33,22.84],
        "广州":[113.23,23.16],
        "山西":[112.53,37.87],
        "云南":[102.73,25.04],
        "深圳":[114.07,22.62],
        "海南":[110.35,20.02],
        "辽宁":[123.38,41.8],
        "吉林":[125.35,43.88],
        "宁夏":[106.27,38.47],
        "江西":[115.89,28.68],
        "内蒙古":[111.65,40.82],
        "四川":[104.06,30.67],
        "陕西":[108.95,34.27],
        "重庆":[106.54,29.59],
        "江苏":[119.95,31.79],
        "北京":[116.46,39.92],
        "新疆":[87.68,43.77],
        "浙江":[120.19,30.26],
        "甘肃":[103.73,36.03],
        "天津":[117.2,39.13],
        "河南":[113.65,34.76],
        "黑龙江":[126.63,45.75],
        "河北":[114.48,38.03],
        "湖南":[113,28.21],
        "安徽":[117.27,31.86],
        "湖北":[114.31,30.52],
        "贵州":[106.71,26.57],
        "青海":[101.74,36.56]
    };

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    option = {
        geo: {
            map: 'china',
            roam: false,//是否允许缩放
            label: { //地图省份名称
                normal: { //默认
                    show: true, //默认不显示
                    position: 'inside',
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: { //经过
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#4d87c2',
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                emphasis: {
                    areaColor: 'rgba(61,97,166,1)',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',//阴影
                    shadowBlur: 20//阴影
                }
            }
        },
        series: [
            {
                name: '',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                symbolSize: 10,
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        color: '#7ce2ff',
                        shadowBlur: 10,
                        shadowColor: '#5186A2'
                    }
                },
                data: convertData(
                    [
                    {name: '上海'},
                    {name: '山西'},
                    {name: '安徽'},
                    {name: '海南'},
                    {name: '河南'},
                    {name: '陕西'},
                    {name: '江苏'},
                    {name: '江西'},
                    {name: '浙江'},
                    {name: '山东'},
                    {name: '吉林'},
                    {name: '辽宁'},
                    {name: '湖北'}
                ]
                )

            }
        ]
    };
    myChart.setOption(option);

    myChart.on('click', function(params) {
        //点击获取点击省份
        //在这里调取省份数据
        console.log(params);
        console.log(params.name);

        $('.ditu>img').each(function () {
            var _name=$(this).attr('data');
            var type=$(this).attr('data-value');
            var title = '';
            if(_name==params.name){
                $('.map-search-input').val(type);
                search(type,title);
                $('.map-select').addClass("on").find("h3 span").text(params.name);
                $('.ditu').addClass("on");
                $('.map .yy').fadeIn();
                $(this).show().siblings().hide();
            }
        })
    });
    myChart.setOption(option);
    $(function () {
        //关闭筛选框
        $('.close').click(function () {
            $('.map-search-title').val('');
            $('.map-select').removeClass("on");
            $('.map .yy').hide();
            $('.ditu').removeClass("on");
        });
        $('.map-search input[type=button]').click(function () {
            $(".fh").show();
        });
        $('.fh').click(function () {
            $(this).hide();
            $('.map-search-title').val('');
            //清除搜索
            var type = $('.map-search-input').val();
            var title = $('.map-search-title').val();
            search(type,title);
        })
    });
    $('.map-search-button').click(function () {
        var type = $('.map-search-input').val();
        var title = $('.map-search-title').val();
        search(type,title);
    });
    function search(type,title) {
        $.post('/api/territory/find', {
                title : title,
                type : type,
            },
            function(data) {
                switch (data.errcode) {
                    case 0 :
                        var html = '';
                        var preview = '';
                        for (var t=0; t < data.rsp.length; t++) {
                            preview = data.rsp[t];
                            html += '<li><b>'+ preview.title +'：</b>'+ preview.synopsis +'</li>';
                        }
                        if (html == '') {
                            html = '<li class="no">暂无数据</li>';
                        }
                        $('.map-search-ul').html(html);
                        break;
                    default :
                        alert('网络不稳定');
                        break;
                }
            }, 'json');
    }

</script>
